<!-- CalendarComponent.vue -->
<template>
	<view class="calendar-container">
		<!-- 固定星期标题 -->
		<view class="week-header">
			<view v-for="(day, index) in weekDays" :key="index" :class="{
				'week-day': true,
				'theme-color': [0, 6].includes(index)
			}">
				{{ day }}
			</view>
		</view>

		<!-- 滚动的月份日历 -->
		<scroll-view scroll-y class="months" :style="{ height: scrollHeight + 'rpx' }">
			<view v-for="(month, index) in months" :key="index" class="month-block">
				<view class="month-title">{{ month.title }}</view>
				<view class="days-grid">
					<view v-for="(day, idx) in month.days" :key="idx" class="day-cell" @click="onDayClick(day.date)"
						:class="{ 'disabled': beforeDate(day.date), 'today': isToday(day.date), 'selected': isSelected(day.date) }">
						<view v-if="day.date">
							<view>{{ isToday(day.date) ? '今' : day.date.getDate() }}</view>
							<view class="price" v-if="!beforeDate(day.date)">$10</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import dayjs from 'dayjs'

const emit = defineEmits(['select'])

const weekDays = ['日', '一', '二', '三', '四', '五', '六']
const months = ref([])
const scrollHeight = 760 // 可根据实际页面调整滚动区域高度


const selectedDate = ref([])

function generateCalendarMonths(startDate, monthCount) {
	const list = []
	for (let i = 0; i < monthCount; i++) {
		const monthStart = dayjs(startDate).add(i, 'month').startOf('month')
		const days = []
		const firstWeekday = monthStart.day()
		const totalDays = monthStart.daysInMonth()

		// 上月补空格
		for (let j = 0; j < firstWeekday; j++) {
			days.push({ date: "", inCurrentMonth: false })
		}

		// 本月日期
		for (let d = 1; d <= totalDays; d++) {
			days.push({ date: monthStart.date(d).toDate(), inCurrentMonth: true })
		}

		// 补足 7 的倍数
		while (days.length % 7 !== 0) {
			days.push({ date: "", inCurrentMonth: false })
		}

		list.push({
			title: monthStart.format('YYYY年MM月'),
			days
		})
	}
	return list
}

function isToday(date) {
	const today = dayjs()
	return dayjs(date).isSame(today, 'day')
}

const beforeDate = (date) => {
	const today = dayjs()
	return dayjs(date).isBefore(today, 'day'); // 是否早于某时间

}

const onDayClick = (date) => {
	if (beforeDate(date)) {
		return;
	}
	const index = selectedDate.value.findIndex(d => dayjs(d).isSame(date, 'day'))
	if (index < 0) {
		selectedDate.value.push(date)
	} else {
		selectedDate.value.splice(index, 1)
	}
	emit('select', selectedDate.value)
}

function isSelected(date) {
	return selectedDate.value.some(d => dayjs(d).isSame(date, 'day'))
}
onMounted(() => {
	const now = dayjs()
	months.value = generateCalendarMonths(now, 6) // 当前月开始，显示 6 个月
	console.log(months.value, now)
})
</script>

<style scoped lang="scss">
.calendar-container {
	padding: 20rpx;

	.week-header {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		font-weight: bold;
		font-size: 24rpx;
		box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.06);

		// background: #f1f1f1;
		.week-day {
			flex: 1;
			text-align: center;
		}
	}

	.months {
		overflow-y: auto;

		.month-block {
			margin-bottom: 40rpx;
			box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.06);
		}

		.month-title {
			text-align: center;
			font-size: 24rpx;
			margin: 20rpx 0;
			font-weight: bold;
			line-height: 60rpx;
		}

		.days-grid {
			display: grid;
			grid-template-columns: repeat(7, 1fr);
			gap: 10rpx;

			.day-cell {
				text-align: center;
				padding: 20rpx 0;
				background-color: #ffffff;
				border-radius: 8rpx;
				// border: 1rpx solid #ddd;
				font-size: 28rpx;
				height: 80rpx;

				&.disabled {
					color: #bbb;
					// background-color: #f9f9f9;
				}

				.price {
					font-size: 20rpx;
					margin-top: 10rpx;
				}

				&.today {
					color: #986C5D;
					font-weight: 600;
					font-size: 30rpx;
				}

				&.selected {
					background: #986C5D;
					color: #fff;
				}

				&.selected.today {
					color: #fff;
				}
			}
		}
	}
}
</style>